// 重载 Ext.data.Store.prototype.applySort 函数以修复 DataStore 对汉字排序异常的问题

// var _applySort = Ext.data.Store.prototype.applySort;        
//如有需要，保存原 applySort 函数的引用
Ext.data.Store.prototype.applySort = function(){	//重载 applySort
	if(this.sortInfo && !this.remoteSort){
		var s = this.sortInfo, f = s.field;
		var st = this.fields.get(f).sortType;
		var fn = function(r1, r2){
			var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
			// 添加:修复汉字排序异常的Bug
			if(typeof(v1) == "string"){ //若为字符串，
					return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持
				}
			// 添加结束
			return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
		};
		this.data.sort(s.direction, fn);
		if(this.snapshot && this.snapshot != this.data){
			this.snapshot.sort(s.direction, fn);
		}
	}
};

var renderDescn = function(value, cellmeta, record, rowIndex, columnIndex, store) {
	var str = "<input type='button' value='查看详细信息' onclick='alert(\""
			+"这个单元格的值是:" + value + "\\n"
			+"这个单元格的配置是:{cellId:" +cellmeta.cellId + ",id:" 
				+cellmeta.id + ", css:" + cellmeta.css + ")\\n"
			+"这个单元格对应行的record是:" + record + "\\n"	
			+"这是第" + rowIndex + "行\\n"
			+"这是第" + columnIndex + "列\\n"
			+"这个表格对应的Store" + store + "\\n"
			+ "\")'";
	return str;
}
var sm = new Ext.grid.CheckboxSelectionModel({
	handleMouseDown:Ext.emptyFn//在选中行时不执行选择操作
});

/**
 * 数据列的定义，称为ColumnModel，作为整个表格的列模型
 * 如果不定义宽度,则默认即为100
 * sortable:支持列排序
 */
var cm = new Ext.grid.ColumnModel([
	sm,
	new Ext.grid.RowNumberer(),
	{header:'编号', dataIndex:'id'},//, width:80},
	{header:'名称', dataIndex:'name'},//, width:200},
	{id:'descn',header:'描述', dataIndex:'descn', sortable:true, renderer:renderDescn}
	
])


/**
 * grid并不只是支持array，还可以支持json，支持xml，甚至是自己定义的数据格式，
 * Ext.data.Store就是一座桥梁，通过他可以把任何格式的数据转换为grid可以使用
 * 的形式，也就不需要为每种数据格式写一个grid的实现了。
 * Store分为二部分,proxy指定从哪里获取数据,reader指定如何解析数据
 */
var ds = new Ext.data.GroupingStore({
	proxy:new Ext.data.HttpProxy({url:'grid.jsp'}),
	reader:new Ext.data.JsonReader({
		totalProperty:'totalProperty',
		root:'root'
	}, [
		{name:'id'},
		{name:'name'},
		{name:'descn'}
	]),
	sortInfo:{field:'name', direction:'ASC'},
	groupField:'name'
})

Ext.onReady(function(){
	/**
	 * 
	 */
	var grid = new Ext.grid.GridPanel({
		tbar:[{
			xtype:'button',
			text:'删除第二行',
			handler:function(){
				ds.remove(ds.getAt(1));//删除一行
				grid.view.refresh();//刷新视图
			}
		}],
		view:new Ext.grid.GroupingView(),
		bbar:[
		new Ext.PagingToolbar({
			pageSize:10,
			store:ds,
			displayInfo:true,
			displayMsg:'显示第{0}条到{1}条记录,一共{2}条记录',
			emptyMsg:'没有记录'
		})
		],
		ds:ds,
		cm:cm,
		sm:sm,
		renderTo:Ext.getBody(),
		autoHeight:true,
		viewConfig:{
			forceFit:true//让GridViw自己去调整列宽吧
		}//,
		//指定列宽自定伸缩，从而填充整个表格,但是只能指定一列的id
		//autoExpandColumn:'descn'
		
	})
	/**
	 * 如果配置了分页工具条，ds.load()必须在构造grid以后才能执行，否则
	 * 分页工具条将不会起作用
	 */
	ds.load({params:{start:0,limit:10}});//对数据初始化
	
})